// 预期将来要的效果
// Message({ type: 'warning', text: '内容' })
// Message({ type: 'success', text: '内容' })
// Message({ type: 'error', text: '内容' })
import { h, render } from 'vue'
import XtxMessage from './message.vue'
type paramsType = {
  type: 'success' | 'warning' | 'error'
  text: string
  duration?: number
}
// 创建一个盛放message的父容器
const divDom = document.createElement('div')
divDom.classList.add('xtx-message-box-container')
document.body.append(divDom)
let timeId = -1
const Message = ({ type, text, duration = 2000 }: paramsType) => {
  // 1. 创建虚拟DOM
  const VNode = h(XtxMessage, { type, text })
  // 2. 挂载
  render(VNode, divDom)
  // 3.延时一会 将message从dom结构中移除
  clearTimeout(timeId)
  timeId = window.setTimeout(() => {
    // 清除divDom中的message
    render(null, divDom)
  }, duration)
}
Message.success = function (text: string, duration = 2000) {
  Message({
    type: 'success',
    text,
    duration
  })
}
Message.error = function (text: string, duration = 2000) {
  Message({
    type: 'error',
    text,
    duration
  })
}
Message.warning = function (text: string, duration = 2000) {
  Message({
    type: 'warning',
    text,
    duration
  })
}

export default Message